<template>
    <div>
      <el-dialog
        :title="isEdit? '编辑帖子' : '发布帖子'"
        :visible.sync="localShowDialog"
        width="30%"
      >
        <el-form :model="localNewPost">
          <el-form-item :label="isEdit? '原标题' : '标题'">
            <el-input v-model="localNewPost.title"></el-input>
          </el-form-item>
          <el-form-item :label="isEdit? '原内容' : '内容'">
            <el-input type="textarea" v-model="localNewPost.content"></el-input>
          </el-form-item>
          <el-form-item :label="isEdit? '原分类' : '分类'">
            <el-radio-group v-model="localNewPost.category">
              <el-radio label="经验分享">经验分享</el-radio>
              <el-radio label="情感交流">情感交流</el-radio>
              <el-radio label="病情求助">病情求助</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="isEdit? '替换图片' : '上传图片'">
            <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleFileChange"
                :file-list="localUploadedFiles"
            >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                    <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                        >
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                        >
                            <i class="el-icon-download"></i>
                        </span>
                        <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                        >
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                </div>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button 
            type="primary" 
            @click="handleSubmit"
          >
            {{ isEdit? '更新帖子' : '发布帖子' }}
          </el-button>
        </span>
      </el-dialog>
  
      <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </template>
  
  <script>
  import api from '@/api/api';
  export default {
    props: {
      showDialog: {
          type: Boolean,
          required: true
      },
      newPostData: {
          type: Object,
          default: () => ({
              title: '',
              content: '',
              category: '经验分享'
          })
      },
      uploadedFilesData: {
          type: Array,
          default: () => []
      },
      isEdit: Boolean,
      editedPost: Object,
      disabled: {
    type: Boolean,
    default: false
  },

    },
    data() {
        return {
            localShowDialog: this.showDialog,
            dialogVisible: false,
            dialogImageUrl: '',
            localNewPost: { ...this.newPostData },
            localUploadedFiles: [...this.uploadedFilesData]
        };
    },
    watch: {
        showDialog: {
            immediate: true,
            handler(newVal) {
                this.localShowDialog = newVal;
            }
        },
        newPostData(newVal) {
            this.localNewPost = { ...newVal };
        },
        uploadedFilesData(newVal) {
            this.localUploadedFiles = [...newVal];
        },
        editedPost(newVal) {
            if (newVal) {
                this.localNewPost = {
                    title: newVal.title,
                    content: newVal.content,
                    category: newVal.category
                };
                this.localUploadedFiles = newVal.images || [];
            }
        }
    },
    methods: {
    handleFileChange(file, fileList) {
        this.localUploadedFiles = fileList;
        this.$emit('file-change', file, fileList);
    },

    handleRemove(file) {
        this.localUploadedFiles = this.localUploadedFiles.filter(f => f !== file);
        this.$emit('remove-file', file);
    },

    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },

    handleDownload(file) {
        this.$emit('download-file', file);
    },

    handleSubmit() {
        if (this.isEdit) {
            const updatedPost = {
                ...this.editedPost,
                title: this.localNewPost.title,
                content: this.localNewPost.content,
                category: this.localNewPost.category,
                images: this.localUploadedFiles.map(file => ({ 
                    url: file.url,
                    name: file.name
                }))
            };
            this.$emit('update-post', updatedPost);
        } else {
            this.$emit('submit-post', this.localNewPost);
        }
        this.closeDialog();
    },

    closeDialog() {
        this.localShowDialog = false;
        this.$emit('update:showDialog', false);
    }
}
    };
  </script>    